<template>
	<view>
		<view class="productBox" v-for="(item,index) in commissionData" :key="index">
			<image class="productImg" :src="item.productImg"></image>
			<text class="productname diandiandian">{{item.productname}}</text>
			<view class="productlabel">
				{{item.productlabel}}
			</view>
			<text class="productNumber">编号: {{item.productNumber}}</text>
			<text class="commissionmoney">
				￥ {{item.commissionmoney}}
			</text>
			<view class="grantcommission">
				{{item.grantcommission}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commissionData:[{
					productImg:'../../../static/index/index1.png',
					productname:'产品名称',
					productlabel:'生鲜产品',
					productNumber:'20200320000',
					commissionmoney:'6.80',
					grantcommission:'发放佣金',
				},{
					productImg:'../../../static/index/index1.png',
					productname:'产品名称',
					productlabel:'生鲜产品',
					productNumber:'20200320000',
					commissionmoney:'6.80',
					grantcommission:'发放佣金',
				},{
					productImg:'../../../static/index/index1.png',
					productname:'产品名称',
					productlabel:'生鲜产品',
					productNumber:'20200320000',
					commissionmoney:'6.80',
					grantcommission:'发放佣金',
				},{
					productImg:'../../../static/index/index1.png',
					productname:'产品名称',
					productlabel:'生鲜产品',
					productNumber:'20200320000',
					commissionmoney:'6.80',
					grantcommission:'发放佣金',
				}]
			};
		}
	}
</script>

<style lang="scss">
       .productBox{
		   width: 750rpx;
		   height: 190rpx;
		   background:rgba(255,255,255,1);
		   margin-top: 10rpx;
		   position: relative;
	   }
	   .productImg{
		   width:100rpx;
		   height:100rpx;
		   position: absolute;
		   top: 30rpx;
		   left: 30rpx;
	   }
	   .productname{
		   width: 420rpx;
		   display: block;
		   font-size:32rpx;
		   font-family:PingFang SC;
		   font-weight:bold;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   top: 30rpx;
		   left: 155rpx;
	   }
	   .productlabel{
		   width:78rpx;
		   height:28rpx;
		   background:rgba(115,34,216,1);
		   opacity:0.5;
		   border-radius:4rpx;
		   font-size:16rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(255,255,255,1);
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   position: absolute;
		   top: 79rpx;
		   left: 154rpx;
	   }
	   .productNumber{
		   font-size:18rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(142,142,142,1);
		   position: absolute;
		   top: 110rpx;
		   left: 154rpx;
	   }
	   .commissionmoney{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(255,59,48,1);
		   position: absolute;
		   right:49rpx;
		   top: 49rpx;
	   }
	   .grantcommission{
		   width:120rpx;
		   height:40rpx;
		   border:2rpx solid rgba(115,34,216,1);
		   border-radius:20rpx;
		   font-size:22rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(115,34,216,1);
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   position: absolute;
		   right:30rpx;
		   top: 90rpx;
	   }
</style>
